v3.19.1

Compare Source

Patch Changes

• aa9c2b0
  Thanks @​segunadebayo! - - System: Fix
  issue where some svg element props tend to be treated as style props

  • Checkbox: Use consistent cursor for checkbox and radio group

v3.19.0

Compare Source

Minor Changes

• #​9464
  d860d48
  Thanks @​segunadebayo! - - [New]
  Combobox Add combobox component for autocomplete text entry.

  • Progress Circle: Make progress circle transition smoother.

v3.18.0

Compare Source

Minor Changes

• e91ec7e
  Thanks @​segunadebayo! - - DownloadTrigger
  [New] Add DownloadTrigger component to help download file contents.

  • System

    • Fix issue where passing d prop to chakra.path adds it to styles not as
      a direct attribute.
    • Fix issue where responsive semantic tokens did not get applied.

  • Select: Fix issue where indicator group doesn't align correctly in RTL
    layouts.

v3.17.0

Compare Source

Minor Changes

• #​9977
  ad8cc44
  Thanks @​seongminn! - - Breadcrumb: Prevent
  screen reader from reading the separator

  • Toast: Added toast queuing when the max limit is reached:

    • New toasts were queued instead of dropped
    • Queued toasts were shown when space became available
    • Queue cleared when all toasts were removed

  • SegmentGroup: Fix issue where disabled prop was not being applied to
    SegmentGroup.Items

  • RatingGroup: Fix issue where half-filled icons were not being displayed
    correctly in RTL

  • Collapsible: Fixed issue in React.js <= v18.x where collapse animation
    might not work as expected

v3.16.1

Compare Source

Patch Changes

• 46075ba
  Thanks @​segunadebayo! - - Dialog,
  Drawer: Use correct z-index for dialog and drawer backdrop

  • SegmentGroup: Fix issue where orientation prop to SegmentGroup.Root
    doesn't work as expected

v3.16.0

Compare Source

Minor Changes

• 529244d
  Thanks @​segunadebayo! - - Global CSS:
  Improve text selection contrast

  • System

    • Fix issue where borderEnd shorthand was not working despite
      borderStart being present
    • Fix issue where system.cva return type was incorrect
    • Soften the focus ring for all color palettes

  • Dialog, Drawer: Fix issue where z-index was not being applied
    correctly

  • [Beta] createOverlay: Add createOverlay utility for programmatically
    controlling overlay components (Dialog, Drawer, etc.)

v3.15.1

Compare Source

Patch Changes

• e3d7db7
  Thanks @​segunadebayo! - - Fix issue where
  backdrop could overlap positioner when reopened quickly
  • Ensure types are consistent with React 19

v3.15.0

Compare Source

Minor Changes

• 2f4ea3b
  Thanks @​segunadebayo! - -
  useMediaQuery: Fix type signature to allow skipping the second argument

  • RadioCard: Fix accessibility issue due to html structure

  • Slider

    • Add support for origin: end to align the thumb to the end of the track.
    • Expose thumbSize as CSS variables in the root element. Can be useful for
      styling the slider.

  • Menu

    • Added onSelect event to the Menu.Item component.
    • Ensure menu items have unique IDs to improve accessibility and HTML
      validation.

v3.14.2

Compare Source

Patch Changes

• 87a072b
  Thanks @​segunadebayo! - - Fix potential
  import error from @zag-js/utils in @ark-ui/react

v3.14.1

Compare Source

Patch Changes

• 0eb769e
  Thanks @​segunadebayo! - - System: Fix
  issue where output of <system>.css(...) from Chakra UI can't be assigned to
  Interpolation<Theme> from @emotion/react.

  • General: Bump @ark-ui/react to latest version.

v3.14.0

Compare Source

Minor Changes

• 354eaa6
  Thanks @​segunadebayo! - Improve render
  performance by upgrading to the latest Ark UI v5.

  This brings a 1.5x–4x performance improvements across components. Learn
  more from the
  Ark UI v5 changelog.

v3.13.0

Compare Source

Minor Changes

• #​9797
  eba44a3
  Thanks @​segunadebayo! - - ColorPicker

  • Add support for ColorPicker.ChannelText component

  • Add ColorPicker.EyeDropper component that wraps IconButton

  • Add ColorPicker.Slider and ColorPicker.Input shortcut components to
    reduce LOC.

  • InputGroup

    • Export directly from the @chakra-ui/react package

  • Pagination

    • Add Pagination.Items shortcut component to render the number of pages
      based on the count and pageSize props.
    • Add Pagination.PageText component to render the current page and total
      pages.

v3.12.0

Compare Source

Minor Changes

• 7abe7e3
  Thanks @​segunadebayo! - - FileUpload:

  • Add FileUpload.FileText to render the list of uploaded file names.
  • Add FileUpload.Items shorcut component to render the list of uploaded
    files.
  • Add FileUpload.List shortcut component that combines FileUpload.Items
    and FileUpload.ItemGroup.

v3.11.0

Compare Source

Minor Changes

• 8789401
  Thanks @​segunadebayo! - - Accordion

  • Fix issue where Accordion.ItemTrigger doesn't apply textAlign: start

  • SegmentGroup

    • Add new SegmentGroup.Items shortcut component to render multiple
      SegmentGroup.Item components based on the items prop

v3.10.0

Compare Source

Minor Changes

• 11bdf77
  Thanks @​segunadebayo! - - Menu

  • Set the default children of Menu.Arrow to Menu.ArrowTip

  • HoverCard

    • Set the default children of HoverCard.Arrow to HoverCard.ArrowTip

  • Dialog, Drawer

    • Update recipe to include absolute positioning styles for close trigger,
      instead of relying on snippet styles.

v3.9.0

Compare Source

Minor Changes

• 52a97d0
  Thanks @​segunadebayo! - - Skeleton
  Bring back SkeletonCircle and SkeletonText components.

  • Switch

    • Transition background color when checked
    • Set the default children for Switch.Control to Switch.Thumb to
      reduce LOC for common use cases.

  • Checkbox

    • Set the default children for Checkbox.Control to Checkbox.Indicator
      to reduce LOC for common use cases.

  • NumberInput

    • Set the default children for NumberInput.Control to
      NumberInput.IncrementTrigger and NumberInput.DecrementTrigger to
      reduce LOC for common use cases.

  • QrCode

    • Set the QrCode.Frame component to QrCode.Pattern to reduce LOC for
      common use cases.

  • RatingGroup

    • Set the default children for RatingGroup.Control to the array of
      RatingGroup.Item components to reduce LOC for common use cases.

  • Slider

    • Add Slider.Marks component to render marks on the slider track. This is
      a closed composition of Slider.MarkerGroup and Slider.Marker to reduce
      LOC for common use cases.
    • Add Slider.Thumbs component to render thumbs on the slider track. This
      is a closed composition of Slider.Thumb to reduce LOC for common use
      cases.

  • PinInput

    • Add support for attached variant prop to render a pin input with
      attached inputs. This removes the need for the Group component to wrap
      the inputs.

v3.8.2

Compare Source

Patch Changes

• 91945b7
  Thanks @​segunadebayo! - Fix issue where
  mt alias to marginBlockStart instead of marginTop

• #​9712
  f733a87
  Thanks @​CerealeZ! - AspectRatio: Fix issue
  where css prop was not respected

v3.8.1

Compare Source

Patch Changes

• cdb9459
  Thanks @​segunadebayo! - - Fix performance
  regression from v3.5.x by reverting memoization logic
  • Add useMemo to provider components and styling hooks to avoid unnecessary
    recomputations

v3.8.0

Compare Source

Minor Changes

• fa5e966
  Thanks @​segunadebayo! - - Add new hooks
  useElementRect, useForceUpdate, useLiveRef,usePrevious and
  useSafeLayoutEffect

  • Add new FocusTrap component for trapping focus within a container

Patch Changes

• #​9616
  54a73a7
  Thanks @​mhsattarian! - - Breadcrumb: Fix
  issue where breadcrumb arrow don't flip in RTL
  • Snippets / Color Mode: Add LightMode and DarkMode components to
    force light and dark color mode in a subtree
  • Docs / Testing: Add testing guideline for Vitest
  • Group: Fix issue where Group component doesn't skip invalid children

v3.7.0

Compare Source

Minor Changes

• cb0ffc9
  Thanks @​segunadebayo! - - Avatar: Add
  support for passing name to the AvatarFallback to render the initials. If
  no name or children is passed, it'll render either the initials or a
  fallback icon.

  • Hooks: Add useConst and useUpdateEffect hooks from v2.
  • Wrap: Bring back the Wrap component from v2.

v3.6.0

Compare Source

Minor Changes

• 04a1a07
  Thanks @​segunadebayo! - - Styled
  System:

  • Boost performance of style resolution by removing JSON.stringify in memo
    function and avoid memoizing non-primitive arguments.
  • Connect assets token to backgroundImage and listStyleImage css
    properties.
  • Menu, Tooltip: Set lazyMount and unmountOnExit to true in the
    Root component to improve initial rendering performance.
  • AbsoluteCenter: Fix issue where axis doesn't work in RTL mode.
  • Snippets / QRCode: Remove snippet in favor of compound component
    pattern.
  • List: Fix issue where list items don't wrap correctly.
  • Stat: Bring back StatGroup component from v2.
  • Close Button: Add CloseButton component.

v3.5.1

Compare Source

Patch Changes

• 34d46e3
  Thanks @​segunadebayo! - - Button: Fix
  issue where button is not disabled when loading props is passed

  • ColorPicker, HoverCard, Tooltip: Fixed intermittent placement shifts
    caused by updates to the data-placement attribute
  • Snippets / Alert: Deprecate the Alert snippet in favor of using the
    Alert component directly from @chakra-ui/react.

v3.5.0

Compare Source

Minor Changes

• 30a12d0
  Thanks @​segunadebayo! - - Native Select

  • Fix issue where disabled and invalid props were not being passed to the
    NativeSelectField component.
  • Persist error focus ring when invalid prop is set.
  • Fix issue where native select isn't readable in dark mode for Windows/Linux
    devices.
  • [New] Loader: Add new Loader and LoaderOverlay components.
  • [New] Button Group: Add new ButtonGroup component similar to v2 for
    grouping similar buttons.
  • Button: Add loading and loadingText props to the Button component.
  • Snippets / Menu: Refactor checkbox item to fix rendering
  • Snippets / Button: Removed the button snippet in favor of built-in
    component.

v3.4.0

Compare Source

Minor Changes

• 375e05f
  Thanks @​segunadebayo! - - [New]
  Presence: Add component to animate an element using css animation, and
  control the mount/unmount behavior

Patch Changes

• 882c7f6
  Thanks @​segunadebayo! - - Separator:
  Fix issue where aria-orientation was missing in the DOM and orientation
  was added instead.

  • FileUpload
    • Resolved an issue where form-related components reset despite the reset
      event being cancelled.
    • Fixed a brief warning display when a new image file is added to the
      preview.
    • Enhanced click detection for the dropzone and added support for the
      disableClick prop.

• 4c885df
  Thanks @​segunadebayo! - - Button, Icon
  Fix issue where button and icon doesn't export props providers

• b39ea43
  Thanks @​segunadebayo! - System: Fix
  issue where render times feels slower compared to v2 due to the global style
  computation in the provider component. Now, it is much faster.
  See Discussion

v3.3.3

Compare Source

Patch Changes

• 9c55f21
  Thanks @​segunadebayo! - Fix issue where
  icon sizes doesn't work anymore

v3.3.2

Compare Source

Patch Changes

• 855bb29
  Thanks @​segunadebayo! - - Icon:
  Refactor icon recipe size=inherit to allow for composition with button

  • Snippet / Tooltip: Set portalled to true by default

• #​9470
  4bd9f8d
  Thanks @​lcswillems! - - Menu, Select: Use
  the same semantic token for select _highlighted state

  • Toast: Fix issue where toast close trigger was not visible

• e4fe984
  Thanks @​segunadebayo! - Fix issue where
  using <Icon as={...} /> throws an error, forcing users to use the asChild
  approach

• e506044
  Thanks @​segunadebayo! - Fix issue where
  factory shows a warning React 19 due to accessing child.ref

v3.3.1

Compare Source

Patch Changes

• 0fc040a
  Thanks @​segunadebayo! - HoverCard,
  Tooltip: Resolved an issue where the controlled open state could become
  inconsistent during the opening or closing phases.

• 1439548
  Thanks @​segunadebayo! - Fix issue where
  useRecipe and useSlotRecipe returns never when key does not match
  built-in recipe.

v3.3.0

Compare Source

Minor Changes

• #​9437
  791bcec
  Thanks @​segunadebayo! - ### Added

  • Clipboard: Introduced Clipboard.ValueText to display clipboard
    content.
  • FileUpload:
    • Added preventDropOnDocument to block file drops on the document when the
      file upload component is active.
    • Added setClipboardFiles to the API for setting files from clipboard
      data.
  • Progress: Added support foronValueChange and defaultValue.
  • Tabs, Menu, Combobox: Added navigate property for custom router
    navigation when selections render as links.
  • QrCode:
    • Added support for onValueChange and defaultValue.
    • Added QrCode.DownloadTrigger to enable QR code image downloads.

Fixed

• Collapsible: Fixed a bug where the opening animation replayed when an
  open collapsible was re-rendered.

• Dialog, Popover: Resolved an issue causing dialogs or popovers to close
  if the focused element was removed from the DOM.

• FileUpload: Fixed a bug causing the hidden input to desync from accepted
  files.

• Menu, Popover: Fixed inconsistent interaction detection outside the
  component when the trigger was inside a scrollable container.

• Pagination: Corrected an issue where the page range returned an
  incorrect end value when pageSize exceeded count.

• QRCode: Fixed getDataUrl to generate a properly sized QR code.

• #​9437
  791bcec
  Thanks @​segunadebayo! - Add new QRCode
  component for converting text and links to QR codes.

  import { QrCode } from "@​chakra-ui/react"
  
  export const QrCodeWithoutSnippet = () => {
    return (
      <QrCode.Root value="..." size="md">
        <QrCode.Frame>
          <QrCode.Pattern />
        </QrCode.Frame>
      </QrCode.Root>
    )
  }

Patch Changes

• d3f1c19
  Thanks @​segunadebayo! - Fix issue where
  htmlWidth and htmlHeight doesn't work in Image or chakra.image
  elements.

• f32cb4a
  Thanks @​segunadebayo! - Improve typesafety
  for layer styles to support common shorthands like bg, bgColor, bgImage

• b11587b
  Thanks @​segunadebayo! - Fix compound
  variant matching not working with colorPalette prop

v3.2.5

Compare Source

Patch Changes

• d195ced
  Thanks @​segunadebayo! - - Snippets /
  Pagination: Fix issue where pagination page text renders incorrectly when
  the pageSize is greater than the count value with format=long

  • Snippets / InputGroup: Improve typings for children prop to prevent TS
    errors

• 609855d
  Thanks @​segunadebayo! - Improve type-safety
  in useRecipe and useSlotRecipe hooks

• 636c61f
  Thanks @​segunadebayo! - useMediaQuery:
  Fix issue where partial media queries like aspect-ratio < 1 doesn't return
  the correct result.

  Good to know: Partial media queries like aspect-ratio < 1 resolves to
  aspect-ratio < 1 / 1 in the browser.

• b1c3f74
  Thanks @​segunadebayo! - Fix issue where
  composing Input component throws asChild React HTML prop warning.

• e7fddd5
  Thanks @​segunadebayo! - Fix issue where
  mergeConfigs does not override functions

• 55258da
  Thanks @​segunadebayo! - - FileUpload:
  Resolved an issue where the accept attribute wasn’t applied to the hidden
  input.

  • NumberInput: Fixed issue where the input event wasn’t triggered on the
    first click of the increment/decrement controls.

v3.2.4

Compare Source

Patch Changes

• df0ac52
  Thanks @​segunadebayo! - Fix issue where
  component hook props (like UseCheckboxProps, UseCheckboxGroupProps, etc.)
  are not exported.

• be8f80a
  Thanks @​segunadebayo! - Fix issue where
  chakra.x factory component props throws TS error in React 19

v3.2.3

Compare Source

Patch Changes

• d821ab5
  Thanks @​segunadebayo! - Fix issue where
  responsive semantic tokens doesn't work as expected.

v3.2.2

Compare Source

Patch Changes

• 7234d75
  Thanks @​segunadebayo! - - Slider

  • Add DraggingIndicator component to show an element only while dragging

  • Fix issue where slider marks were not styled correctly in vertical
    orientation

  • Menu: Update recipe to use --available-height css variable to keep the
    menu's height within the available space

  • System: Fixed issue where exporting withRootProvider would result in
    type error

  • Snippets / Slider

    • Move MarkerGroup into the Control component
    • Remove hardcoded margin values in favor of recipes and
      data-has-mark-label attribute

v3.2.1

Compare Source

Patch Changes

• #​9240
  561ccc0
  Thanks @​Pagebakers! - - System: Fix issue
  where exporting withProvider and withContext would result in type error

  • Timeline: Fix issue where TimelineTitle was missing from the export
  • Tabs: Fix issue where useTabs and useTabsContext were not exported
  • Snippets / ColorPicker: Fix flex direction of ColorPickerChannelInputs
    and ColorPickerChannelSliders

v3.2.0

Compare Source

Minor Changes

• #​9130
  e5880fb
  Thanks @​segunadebayo! - - [Preview] Add new
  ColorPicker component to allow users pick a color in hsl, rgb, hsb formats.

  • Add new ColorSwatch component to preview a color.
  • Fix issue where mergeConfigs mutates the underlying configs passed to it.

v3.1.2

Compare Source

Patch Changes

• 65952d7
  Thanks @​segunadebayo! - - General: Fix
  issue where value change types were not re-exported from Ark UI

  • Layer Style: Fix issue where fill.surface layer style doesn't render
    the correct styles
  • Pagination: Fix issue where PaginationPageText did not render the
    correct page range

v3.1.1

Compare Source

Patch Changes

• #​9128
  0715e2c
  Thanks @​coverlv! - Fix issue where
  useBreakpointValue throws error if ssr is false

• #​9103
  1254769
  Thanks @​Newbie012! - - Checkbox: Fix issue
  where checkmark doesn't show on Safari

  • Alert: Fix issue where indicator icon is not visible on Safari
  • ClientOnly: Fix issue where returned the incorrect type leading to TS
    error like ClientOnly cannot be used as a JSX component.
  • Fieldset: Fix issue where anatomy is not exported
  • Timeline: Refactor variants such that it responds to colorPalette

v3.1.0

Compare Source

Minor Changes

• 9a27c2c
  Thanks @​segunadebayo! - - System: Fix
  issue where using as prop with logic based components doesn't work as
  expected.

  • DataList: Add support for bold variant.

  • Button: Tweak the horizontal padding when size is sm.

  • Snippets

    • Slider: Add showValue prop to render the text value of the slider.
    • Select
      • Add HiddenSelect to ensure it works in form submissions.
      • Fix type inference is lost when using SelectRoot component from
        snippet
      • Fix issue where form data is not populated when using native form
        element
    • ColorMode: Fix type error when using the latest next-themes.
    • Provider: Forward props to ColorModeProvider powered by next-themes
      for better customization.

  • Toggle: Add Toggle component for toggling between two states. It
    composes the Button component.

v3.0.2

Compare Source

Patch Changes

• 20b91bd
  Thanks @​segunadebayo! - - InputAddon:
  Fix issue with input addon not stretched correctly.
  • Snippets / Toaster: Improve toaster styling by adding
    width={{ md: "sm" }} to the toast root.

v3.0.1

Compare Source

Patch Changes

• c0020c9
  Thanks @​segunadebayo! - Fix issue where
  using keyframe interpolation in animation prop doesn't work

• 7d4f898
  Thanks @​segunadebayo! - Fix issue where
  scrollBehavior=outside doesn't allow scrolling outside the dialog content

v3.0.0

Major Changes

• #​8153
  7b6e66a
  Thanks @​segunadebayo! - Prepares the ground
  for the next version Chakra that leverages Ark UI.

  User Facing

  • Consolidate all component packages into a single package
  • Remove all deprecated components and APIs
  • Simplify the Changelogs for all v2 releases

  Infrastructure

  • Simplify the repo infrastructure and release process
  • Migrate from jest to vitest
  • Migrate from tsup to custom rollup setup for better bundling strategy

• #​8815
  806be96
  Thanks @​isBatak! - Remove the @chakra-ui/hooks
  package in favour of using dedicated, robust libraries like react-use and
  usehooks-ts

Minor Changes

• #​8121
  170198f
  Thanks @​kkieninger! - ### Fixed

  • Fix hard-coded z-index for Menu in favor of one defined from the theme
  • Fix problem with leading and trailing spaces when getting initials for the
    Avatar component
  • Suppress unnecessary re-renders of Checkbox and Radio component

Added

• Add CSS accentColor property to style props
• Add support for asChild in chakra factory
• Export toastStore from toast component
• Upgrade framer-motion to allow for skipAnimations
• Add component namespace to reduce imports and provide better composition
• Modal, Drawer: Add default preserveScrollBarGap

Changed

Redesign the component themes and anatomy

• 192c6b1
  Thanks @​segunadebayo! - Add new fieldset
  component

• 07b04b1
  Thanks @​segunadebayo! - - [NEW]: Add
  RatingGroup, SegmentControl

  • [NEW]: Add EmptyState component for empty states
  • [NEW]: Add RadioCard and CheckboxCard components for card-based
    selection

• #​8568
  5fd993b
  Thanks @​isBatak! - Add Collapsible recipe with
  default open/close animation

• 3fc49ca
  Thanks @​segunadebayo! - Add support for
  FormatNumber and FormatByte components

• 3ccbbdf
  Thanks @​segunadebayo! - ### Motion Styles

  Add support for motionStyle props.

  The idea is to pair them with text styles and layer styles to create this
  three-part mixin that can make your styles a lot cleaner.

  Motion styles focus solely on animations, allowing you to orchestrate
  animation properties.

  import { defineMotionStyles } from "@​chakra-ui/react"
  
  export const motionStyles = defineMotionStyles({
    "slide-fade-in": {
      value: {
        transformOrigin: "var(--transform-origin)",
        animationDuration: "fast",
        "&[data-placement^=top]": {
          animationName: "slide-from-top, fade-in",
        },
        "&[data-placement^=bottom]": {
          animationName: "slide-from-bottom, fade-in",
        },
        "&[data-placement^=left]": {
          animationName: "slide-from-left, fade-in",
        },
        "&[data-placement^=right]": {
          animationName: "slide-from-right, fade-in",
        },
      },
    },
  })

Built-in Keyframe Animations

Chakra new provides built-in keyframe animations that you can use to create
your own motion styles.

Slide: slide-from-top, slide-from-bottom, slide-from-left,
slide-from-right, slide-to-top, slide-to-bottom, slide-to-left,
slide-to-right

Slide Full: slide-from-top-full, slide-from-bottom-full,
slide-from-left-full, slide-from-right-full, slide-to-top-full,
slide-to-bottom-full, slide-to-left-full, slide-to-right-full

Fade: fade-in, fade-out

Scale: scale-in, scale-out

You can compose these animations using the animationName property in your
motion styles to create really cool animations. No JS required.

<Box animationName="slide-from-top, fade-in" animationDuration="fast">
  Slide from top and fade in
</Box>

• 3ccbbdf
  Thanks @​segunadebayo! - Add support for
  built-in layer styles to help prototype faster with automatic dark mode.
  Paired with colorPalette, you can create beautiful designs with little code
  that adapts to dark mode automatically.

  Fill Layer Styles: fill.muted, fill.solid, fill.surface

  <Box layerStyle="fill.muted" colorPalette="red">
    This is a subtle fill layer
  </Box>

  Border Layer Styles: outline.muted, outline.solid

  <Box layerStyle="outline.muted" colorPalette="red">
    This is a subtle outline layer
  </Box>

  Indicator Styles: indicator.top, indicator.end, indicator.bottom,
  indicator.start

  <Box layerStyle="indicator.top" colorPalette="red">
    This is a top indicator layer
  </Box>

  Disabled Styles: disabled

  <Box _disabled={{ layerStyle: "disabled" }}>Disabled Button</Box>

  You can combine these layer styles to create very complex designs with little
  code.

  <Box
    layerStyle="fill.muted"
    _hover={{ layerStyle: "outline.solid" }}
    colorPalette="red"
  >
    This is a complex layer
  </Box>

• de9c0a0
  Thanks @​segunadebayo! - Add DataList
  component

• e77a9b8
  Thanks @​segunadebayo! - - Add new Timeline
  component to presenting chronological information or activities.

  • Trim generated className in the DOM.
  • Add neutral status to Alert component

• 763329e
  Thanks @​segunadebayo! - Add preset and
  preset-base entrypoints.

  • The preset entrypoint exposes the default theme and recipes for Chakra.
  • The preset-base entrypoint exposes the base utilities and conditions used
    internally.

• 925cfd9
  Thanks @​segunadebayo! - Add ActionBar,
  Status, Rating, Pagination components

• e9a1537
  Thanks @​segunadebayo! - BREAKING: Change
  signature of useRecipe, useSlotRecipe, createSlotRecipeContext

createSlotRecipeContext

Before:

const { withProvider, withContext } = createSlotRecipeContext("accordion")

After:

const { withProvider, withContext } = createSlotRecipeContext({
  key: "accordion",
})

useSlotRecipe

Before:

const recipe = useSlotRecipe("accordion")

After:

const recipe = useSlotRecipe({ key: "accordion" })

• 3908155
  Thanks @​segunadebayo! - Rename
  createStyleContext to createSlotRecipeContext

• c654ee3
  Thanks @​segunadebayo! - Improve performance
  of styled components to avoid unneeded re-renders.

• edec8f7
  Thanks @​segunadebayo! - Add clipboard
  composition

• 5093e18
  Thanks @​segunadebayo! - Add cursor pointer
  to button

• 4c6838c
  Thanks @​segunadebayo! - - Rename onLabel
  and offLabel to trackLabel

  • Add support for thumbLabel prop for rendering an icon within thumb

• #​8393
  623e558
  Thanks @​segunadebayo! - - Integrate Ark UI
  components to reduce maintenance surface.

  • Add FileUpload component
  • Remove trigger=hover in favor of HoverCard
  • Replace Tooltip, Popover and HoverCard with those from Ark UI

• 945a777
  Thanks @​segunadebayo! - BREAKING: Integrate
  Ark v4. This mostly affects the custom select component that requires the use
  of createListCollection now.

• c26acf0
  Thanks @​segunadebayo! - Add support for
  cursor token type

• 55c0839
  Thanks @​segunadebayo! - Move the Prose
  component to snippets so it can be customized by the user.

• 952647a
  Thanks @​segunadebayo! - Add CardTitle and
  CardDescription components

• f4762bf
  Thanks @​segunadebayo! - Add support for
  merging multiple system configs into one within createSystem

  Before:

  const config = mergeConfigs(defaultConfig, customConfig)
  export const system = createSystem(config)

  After:

  const system = createSystem(defaultConfig, customConfig)

• #​8218
  a89c598
  Thanks @​segunadebayo! - Add support for
  custom theme conditions or pseudo props via theme.conditions

  // theme.ts
  
  const theme = extendTheme({
    conditions: {
      _closed: "[data-state='closed']", // pseudo prop
    },
  })

  This allows you to use the pseudo prop in your components

  <Box data-state="closed" _closed={{ bg: "red.200" }}>
    This box is closed
  </Box>

  For TypeScript users, you need to use the Chakra CLI to generate the types
  for your custom conditions.

  pnpm chakra-cli tokens src/theme/index.ts

• c2f45ca
  Thanks @​segunadebayo! - Rename
  Fieldset.Control to Fieldset.Content

• 1738b90
  Thanks @​segunadebayo! - - Icon: Set
  asChild to true by default to reduce repetition

  • All components

    • Ensure consistent sizing convention (units of 4px). Smaller elements start
      at 20px, larger elements start at 40px
    • Ensure focus ring matches the colorPalette

  • Input, Textarea: Rename filled variant to subtle

  • Tags: Add new Tag.StartElement and Tag.EndElement components to allow
    for easier styling of the start and end elements

• 3ccbbdf
  Thanks @​segunadebayo! - Redesign Stepper
  component. It's now called Steps and manages the state internally, no need
  to use useSteps anymore.

  We've also improved the accessibility of the component by leveraging the tabs
  pattern and adding the required ARIA attributes.

  <Steps.Root defaultIndex={0} count={2}>
    <Steps.List>
      <Steps.Item index={0}>
        <Steps.Trigger>
          <Steps.Title>Step 1</Steps.Title>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
  
      <Steps.Item index={1}>
        <Steps.Trigger>
          <Steps.Title>Step 2</Steps.Title>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    </Steps.List>
  
    <Steps.Content index={0}>Step 1</Steps.Content>
    <Steps.Content index={1}>Step 2</Steps.Content>
    <Steps.CompleteContent>Complete</Steps.CompleteContent>
  </Steps.Root>

  Using the CLI, you can also scaffold an already composed stepper component

  chakra composition add steps

• 548470d
  Thanks @​segunadebayo! - Add custom select
  from Ark UI and design recipe

• 8b110da
  Thanks @​segunadebayo! - Support inlining
  recipe in createRecipeContext and createSlotRecipeContext for better DX
  when shipping libraries based on Chakra.

  This reduces the need for using the Chakra CLI to generate types for custom
  components.

• 05793a2
  Thanks @​segunadebayo! - - Make gray the
  default color palette.

  • Change avatar sm size to 36px for consistency.
  • Move bg for outline component variants.

• 43f2c7d
  Thanks @​segunadebayo! - - CheckboxCard
  [New]

  Add support for a new CheckboxCard component that can be used to render a
  card with a checkbox.

  <CheckboxCard.Root>
    <CheckboxCard.Control>
      <Stack gap="0" flex="1">
        <CheckboxCard.Label>Checkbox</CheckboxCard.Label>
        <Text>Some description</Text>
      </Stack>
  
      <CheckboxCard.HiddenInput />
      <CheckboxCard.Indicator />
    </CheckboxCard.Control>
  </CheckboxCard.Root>

  • Checkmark [New]

    Add new checkmark component for rendering a static checkmark icon with the
    checked, disabled, and indeterminate state baked in.

  <Stack>
    <Checkmark />
    <Checkmark checked />
    <Checkmark indeterminate />
    <Checkmark disabled />
    <Checkmark checked disabled />
    <Checkmark indeterminate disabled />
  </Stack>

  • EmptyState [New]

    Add new EmptyState component for rendering an empty state message with a
    title, description, and optional action but